<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@taglib uri="/struts-tags" prefix="s"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>"> 
    <link href="themes/css/ui.common.css" rel="stylesheet" type="text/css" />
    <link href="themes/css/ui.child.css" rel="stylesheet" type="text/css" />
    <link href="themes/css/ui.tips.css" rel="stylesheet" type="text/css" />
    <link href="themes/base/jquery.ui.button.css" rel="stylesheet" type="text/css" />
    <link href="themes/base/jquery.ui.all.css" rel="stylesheet" type="text/css" />
    <link id="skin_css" rel="stylesheet" type="text/css" href="themes/css/ui.c.blue.css" />
    <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
    <script src="Scripts/jquery-ui-1.8.custom.min.js" type="text/javascript"></script>
    <script src="Scripts/jquery.json-2.2.min.js" type="text/javascript"></script>
    <script src="Scripts/jQueryUI/jquery.ui.datepicker.js" type="text/javascript"></script>
    <script src="Scripts/jQueryUI/jquery.ui.datepicker-zh-CN.js" type="text/javascript"></script>
    <script src="Scripts/ui.admincp.js" type="text/javascript"></script>
    <script src="Scripts/ui.default.js" type="text/javascript" charset="UTF-8"></script>
      <style type="text/css">
        .inputTd
        {
            width: 120px;
        }
        .inputTd input
        {
            width: 110px;
            border: 0px;
        }
        
        .currentRow
        {
            background-color: #c3cc33;
        }
        tr.assessInfoHeader td
        {
             font-weight:bolder;
            text-align: center;
        }
    </style>
<script type="text/javascript">
        $(function () {

            registeRowsHover();

            $(".inputTd:first").click();

            $(".assessItemValue").numeral();

        });

        function foreachHandler(items, callBack) {
            var result = "";
            for (var index in items) {
                result += callBack(items[index]);
            }
            return result;
        }

        function getResult() {
            var result = [];
            $("#staffAssessInfo").find("tr").each(function () {
                var columns = $(this).find("td");
                var staffInfoSpan = $(columns[0]).find("span");
                var staffId = staffInfoSpan.attr("staffId");
                var detailId = staffInfoSpan.attr("detailId");
                var staffName = staffInfoSpan.text();
                var scores = "";
                for (var i = 1; i < columns.length; i++) {
                    scores += ($.trim($(columns[i]).find("span.valueSpan").text()) + ",");
                }
                result.push({ staffId: staffId,detailId:detailId, assessScores: scores.substring(0, scores.length - 1) });
            });

            return result;
        }
        function registeRowsHover() {
            $(".inputTd").live("click", function () {
                var parentRow = $(this).parent();
                if (parentRow.hasClass("currentRow"))
                    return;
                else {
                    disRegisteEvent();
                    parentRow.addClass("currentRow");
                }
                parentRow.find(".assessItemValue").each(function (i) {
                
                    var span = $(this).prev("span:first");
    				$(this).val($.trim(span.text()));
    				span.hide();
    				$(this).show();
                    
                });
                $(this).find(".assessItemValue").focus();

            });
            
                $(".assessItemValue").blur(function () {
                var inp = $(this);
                var max = inp.attr("max") || "";
                if (max == "") {
                    //find max value 
                    var parentTd = $(this).parent("td");
                    var itemIndex = parentTd.attr("itemIndex") || "";
                    //I think it shouldn't be empty.
                    //                    if (itemId == "") {
                    //                        var index = $(this).parent().parent("tr").find("td").index($(this).parent());
                    //                        parentTd.attr("itemIndex", index);
                    //                    }  
                    itemIndex = parseInt(itemIndex, 10) + 1
                    var headerTd = $($("#assessInfoHeader td").get(itemIndex));
                    max = headerTd.attr("max");
                    inp.attr("max", max);
                }
                var val = parseInt(inp.val(), 10);
              
                if (val == "" || isNaN(val) || val <= 0)
                    inp.val(0); 
                if (val > max) {
                    inp.val(max);
                }  
            });

            $("#assessInfoTable").live("blur", function () {

            });
        }

        function disRegisteEvent() {
            $(".currentRow .valueSpan").each(function (o) {
                var inp = $(this).next("input.assessItemValue:first");
                $(this).text(inp.val() + " ");
                $(this).show();
                inp.hide();
            });
            $(".currentRow").removeClass("currentRow");
        }
        
        function modifyAssessInfo(states) {
        	disRegisteEvent();
        	var result =  getResult() ;
			var assessId = ${assessId};
			var ff =$.toJSON( {assessInfoArray:result});
			$.post("assessInfo!modifyInfo.action",{data:ff,assessId:assessId,states:states},function(e){location="assessInfo!manager.action";
		    },"json");

        }
    </script>
  </head>
  
  <body>
     <div class="PageChild_List">
     	<table style="text-align: left" border="1" cellpadding="0" cellspacing="0">
            <tr id="assessInfoHeader"  class="assessInfoHeader">
                <td>
                    &nbsp;
                </td>
                <s:iterator value="assessItemList" var="item">
                    <td assessItemId="${item.itemId}" max="${item.highScore}">${item.itemName}&nbsp;(${item.highScore})</td>
                 </s:iterator>
            </tr> 
            <tbody id="staffAssessInfo" class="staffAssessInfo">
 
                <s:iterator value="assessDetailInfoList" var="item">
                <tr class="assessInfoRow"> 
                    <td  class="assessInfoInputSender">
                        <span staffId="${item.staffInfo.staffId}" detailId="${item.detailId}">${item.staffInfo.archiveInfo.staffName}</span>
                    </td>    
                      <s:iterator value="mapList.get(#item.staffInfo.staffId)" var="score" status="status">
                        <td class="inputTd" itemIndex="${status.index}">
                            <span class="valueSpan" itemId="">&nbsp;${score}</span>
                            <input class="hiddenObject assessItemValue" max="" value=""/>
                        </td>
                      </s:iterator> 
                    </tr>
                </s:iterator>
            </tbody>
        </table>
        <input type="button" class="o-btn SubmitButton" value="保存" onclick="modifyAssessInfo(0)" />&nbsp;<input type="button" class="o-btn SubmitButton" value="提交" onclick="modifyAssessInfo(1)" />
     </div>
  </body>
</html>
